<template>
  <div class="ele-body">
    <el-card shadow="never">
      <!-- 数据表格 -->
      <ele-pro-table
        ref="table"
        row-key="NodeID"
        :datasource="url"
        :columns="columns"
        default-expand-all
        :need-page="false"
        :parse-data="parseData"
        :request="defaultTableRequest"
        :response="defaultTableResponse">
        <!-- 表头工具栏 -->
        <template slot="toolbar">
          <el-button
            v-if="power.create"
            :size="defaultFormSize"
            type="primary"
            icon="el-icon-plus"
            class="ele-btn-icon"
            @click="openEdit(null)">添加
          </el-button>
          <el-button
            @click="expandAll"
            class="ele-btn-icon">展开全部
          </el-button>
          <el-button
            @click="foldAll"
            class="ele-btn-icon">折叠全部
          </el-button>
        </template>
        <!-- 类型列 -->
        <template slot="NodeType" slot-scope="{row}">
          <el-tag
            v-if="[1, 2].includes(row.NodeType)"
            :type="['', 'primary', 'info'][Number(row.NodeType)]">
            {{ ['', '菜单', '按钮'][Number(row.NodeType)] }}
          </el-tag>
        </template>
        <template slot="NodeName" slot-scope="{row}">
          <i v-if="row.NodeIcon" :class="row.NodeIcon"/>
          {{ row.NodeName }}
        </template>
        <!-- 操作列 -->
        <template slot="action" slot-scope="{row}">
          <template v-if="power.isContainAuth">
            <el-link type="primary" :underline="false" icon="el-icon-edit" v-if="power.update" @click="openEdit(row)">
              修改
            </el-link>
            <el-link
              v-if="Number(row.ParentID) === 0"
              type="primary"
              :underline="false"
              icon="el-icon-plus"
              @click="openEdit(null, row.NodeID)">添加菜单
            </el-link>
            <template v-else>
              <el-link
                v-if="Number(row.NodeType) === 1 && power.create"
                type="primary" :underline="false"
                icon="el-icon-plus" @click="openEdit(null, row.NodeID)">
                添加按钮
              </el-link>
              <el-popconfirm class="ele-action" title="确定要删除吗？" v-if="power.delete" @confirm="remove(row)">
                <el-link type="danger" slot="reference" :underline="false" icon="el-icon-delete">删除</el-link>
              </el-popconfirm>
            </template>
          </template>
          <template v-else> ---</template>
        </template>
      </ele-pro-table>
    </el-card>
    <!-- 编辑弹窗 -->
    <save-node :data="current" :menu-list="menuList" :visible.sync="showEdit" @done="reload"/>
  </div>
</template>

<script>
  import SaveNode from "./save";
  import columns from '@/config/columns/node'

  export default {
    name: 'node-index',
    components: {
      SaveNode
    },
    data() {
      return {
        // 表格数据接口
        url: '/node',
        // 表格列配置
        columns,
        // 表格选中数据
        selection: [],
        // 当前编辑数据
        current: null,
        // 是否显示编辑弹窗
        showEdit: false,
        // 全部菜单数据-临时数据
        menuListTemp: [],
        // 全部菜单数据
        menuList: [],
        // 权限
        power: {}
      };
    },
    created() {
      let auth = {
        create: 'node:create',
        update: 'node:update',
        delete: 'node:delete',
      };
      this.power = this.$roleListPermission(auth)
    },
    methods: {
      /* 解析接口返回数据 */
      parseData(res) {
        res.result.list.map(res => {
          this.menuListTemp[res.NodeID] = res
        });
        let menuList = []
        res.result.list.forEach(res => {
          if (Number(res.NodeType) === 1) {
            menuList.push({
              NodeID: res.NodeID,
              ParentID: res.ParentID,
              NodeName: res.NodeName,
            })
          }
        });
        this.menuList = this.$util.toTreeData(menuList, 'NodeID', 'ParentID');
        res.result.list = this.$util.toTreeData(res.result.list, 'NodeID', 'ParentID');
        return res;
      },
      /* 刷新表格 */
      reload() {
        this.$refs.table.reload();
      },
      /* 显示编辑 */
      openEdit(row = {}, parentId = 0) {
        let parent = parentId ? {
          NodeType: 2,
          ControllerName: this.menuListTemp[parentId].ControllerName,
          AddButton: true
        } : {}
        this.current = Object.assign({
          NodeType: 1,
          ParentID: parentId
        }, row, parent);
        this.showEdit = true;
      },
      /* 删除 */
      remove(row) {
        if (row.children && row.children.length > 0) {
          this.$message.error('请先删除子节点');
          return;
        }
        const loading = this.$loading({lock: true});
        this.$http.post('/node/delete', {NodeID: row.NodeID}).then(res => {
          loading.close();
          if (res.data.code === 200) {
            this.$message({type: 'success', message: res.data.msg});
            this.reload();
          }
        }).catch(() => {
          loading.close();
        });
      },
      /* 展开全部 */
      expandAll() {
        this.$refs.table.data.forEach(d => {
          this.$refs.table.toggleRowExpansion(d, true);
        });
      },
      /* 折叠全部 */
      foldAll() {
        this.$refs.table.data.forEach(d => {
          this.$refs.table.toggleRowExpansion(d, false);
        });
      },
    }
  }
</script>

